<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../bootstrap-5.1.3-dist/css/bootstrap.css">
	<script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
</head>

<body class="container">
	<h2>表单验证</h2>
	<form action="" class="was-validated">
		<div class="form-group">
			<label for="uname">用户:</label>
			<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
			<div class="valid-feedback">验证成功！</div>
			<div class="invalid-feedback">请输入用户名！</div>
		</div>
		<div class="form-group">
			<label for="pwd">密码:</label>
			<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
			<div class="valid-feedback">验证成功！</div>
			<div class="invalid-feedback">请输入密码！</div>
		</div>
		<div class="form-group form-check">
			<label class="form-check-label">
				<input class="form-check-input" type="checkbox" name="remember" required> 同意协议
				<div class="valid-feedback">验证成功！</div>
				<div class="invalid-feedback">同意协议才能提交。</div>
			</label>
		</div>
		<button type="submit" class="btn btn-primary">提交</button>
	</form>
</body>

</html>